<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼出自己的名字</title>
    <style>
        span {
            display: inline-block;
            background-image: url(../images/精灵图.png) ;
            background-repeat: no-repeat;
        }
        .c {
            width: 150px;
            height: 140px;
            background-position: 50% -5px;
        }
        .m {
            width: 180px;
            height: 150px;
            background-position: 22% -330px;
        }
        .x {
            width: 135px;
            height: 200px;
            background-position: 51% -680px;
        }
    </style>
</head>
<body>
    <span class="c">c</span>
    <span class="m">m</span>
    <span class="x">x</span>
</body>
</html>